<template>
    <div class="QCBox">
      <div class="QCommentsBox">
        <p class="NoQComment" v-show="this.QComments.length==0">该问题目前没有评论</p>
        <Comment
          v-for="(comment,index) in QComments"
          :comment="comment"
          :index="index"
          :first="true"
          :type="0"
          @LikeComment="LikeComment"
          @cancel_LikeComment="cancel_LikeComment"
          @delComment="delComment"
        />
      </div>
      <el-input
          v-model="QuestionReply"
          type="textarea"
          :rows="4"
          resize="none"
          placeholder="想要说什么"
      />
      <el-button plain class="QCSubmitReply" @click="SubmitReply">提交</el-button>
    </div>
</template>

<script>
import Comment from "@/components/common/Comment.vue";
import ReplyComment from "@/components/common/ReplyComment";
export default {
  name: "QuestionComment",
  props: ['question','user'],
  components: {
    Comment
  },
  mounted() {
    this.loadComment()
  },
  data() {
    return {
      QComments:[],//对问题的评论
      QuestionReply:""
    }
  },
  methods: {
    LikeComment(index) {
      this.QComments[index].liked=true
      this.QComments[index].liked_count++
    },
    cancel_LikeComment(index) {
      this.QComments[index].liked=false
      this.QComments[index].liked_count--
    },
    loadComment(){
      this.$axios
          .get(`${this.$target}/comment/default?to_id=`+this.question.question_id+`&from_id=`+this.user.id+`&type=0`)
          .then(res=>{
            this.QComments=res.data.data
          })
    },
    SubmitReply(){
      if(this.QuestionReply.length===0){
        this.notifyError("你还没有输入任何内容!")
      }else{
        let param = {
          comment_content:this.QuestionReply,
          to_id:this.question.question_id,
          user_id:localStorage.getItem("userID"),
          type:0
        }
        this.$axios
            .post(`${this.$target}/comment`,JSON.stringify(param),{
              headers: {
                'Content-Type': 'application/json;charset=utf-8'
              }
            })
            .then(res=>{
              if(res.data.status===0){
                this.QComments.push(res.data.data)
                this.notifySucceed("发表评论成功!")
                this.QuestionReply=""
              }else{
                this.notifyError("发表评论失败!")
              }
            })
      }
    },
    delComment() {
      this.QComments.splice(this.index,1)
    }
  }
}
</script>

<style scoped lang="less">
.QCBox{
  background: white;
  border-radius: 5px;
  height: 476px;
  text-align: right;
}
.QCommentsBox{
  height: 400px;
  overflow: scroll;
}
.QCSubmitReply {
  position: relative;
  margin-right: 15px;
  margin-top: -60px;
}
.NoQComment {
  margin-top: 160px;
  margin-right: 230px;
  font-size: 24px;
  font-weight: 18;
}
</style>